﻿@using LuckyFish.Blog.Models

<Card class="item" IsShadow="true">
    <BodyTemplate>
        <Row RowType="RowType.Inline" ItemsPerRow="ItemsPerRow.Two">
            @if (Mode == "Left")
            {
                <div>
                    <NavLink Match="NavLinkMatch.All" href="@($"/Article/{Model.UrlName}")">
                        <h5>@Model.Title</h5>
                    </NavLink>
                    <p class="card-text">@Model.Brief</p>
                </div>
                <ImageViewer FitMode="ObjectFitMode.Contain" class="img" Url="@Model.ImageUrl"/>
            }
            else
            {
                <ImageViewer FitMode="ObjectFitMode.Contain" class="img" Url="@Model.ImageUrl"/>
                <div>
                    <a href="@($"/Article/{Model.UrlName}")" target="_blank">
                        <h5>@Model.Title</h5>
                    </a>
                    <p class="card-text">@Model.Brief</p>
                    @if (string.IsNullOrEmpty(Model.ListId))
                    {
                        <a href="@($"/List/{Model.ListId}")">@Model.ListId</a>
                    }
                    <p>@Model.DateString</p>
                </div>
            }

        </Row>
        <div class="row g-3">
            @foreach (var a in Model.Labels)
            {
                <div class="col-6 col-sm-4 col-md-3 col-lg-auto">
                    <a href="@($"/Label/{a.LabelName}")">
                        <Badge Color="Color.Primary">
                            @a.LabelName
                        </Badge>
                    </a>
                </div>
            }
        </div>
    </BodyTemplate>
</Card>

@code {

    [Parameter]
    public ArticleModel Model { get; set; } = new();

    [Parameter]
    public string Mode { get; set; } = "Left";

}

<style>
.img{
    height: 150px;
}
.item{
    width: 80%;
}
</style>